/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {StackActions,NavigationActions} from 'react-navigation';
import { StyleSheet, Text, View,Image,TouchableOpacity,TextInput,FlatList} from 'react-native';
import { scaleSize } from '../../utils/screen';
import FontText,{fontFamily} from '../components/FontText';
import { Toast,ActivityIndicator } from "antd-mobile-rn";
import {i18n} from '../../i18n/index';
import TableItem from '../components/TableItem';
export default class Test extends Component {
  constructor(props){
    super(props);
    this.state = {
      keyword:"",
      data:[{},{},{},{},{},{},{},{},{},{},{},{},{}]
    }
  }
  render() {
    let {keyword,data} = this.state;
    return (
      <View style={styles.container}>
        <View style = {styles.content}>
          <View style = {styles.searchBox}>
            <View style = {styles.searchView}>
              <Image style = {{width:scaleSize(26),height:scaleSize(26)}} source = {require("../../access/imgs/search_icon.png")}/>
              <TextInput 
                  placeholder = {i18n.t("store.table.search")}
                  numberOfLines = {1}
                  onChangeText = {(val)=>this.valuChange(val,"keyword")}
                  style = {styles.inputStyle}
                  value = {keyword}
                  returnKeyType = {"search"}
                  underlineColorAndroid = {'transparent'}
                  placeholderTextColor = {'#5f5f5f'}
              />
            </View>
            <View style = {styles.searchTable}>
              <View style = {styles.fontBox}>
                <FontText font={'book'} style = {styles.tableTips}>{i18n.t("store.table.openTab")}:5</FontText>
                <FontText font={'book'} style = {styles.tableTips}>{i18n.t("store.table.howmanyguests")}:10</FontText>
              </View>
              <TouchableOpacity
                style = {styles.tabLoyout}
              >
                <FontText style = {styles.layoutText} font={'book'}>{i18n.t("store.table.tablelayout")}</FontText>
              </TouchableOpacity>
            </View>
          </View>
          <View style = {styles.tabContent}>
              <FlatList 
                data = {data}
                style = {{flex:1}}
                keyExtractor = {(item,index)=>`eval_${index}`}
                renderItem = {({item,index})=>this.renderTable(item,index)}
                numColumns = {5}
                columnWrapperStyle = {styles.warpStyle}
                ListFooterComponent = {()=>this.rendetAddtab()}
              />
            </View>
        </View>
        <View style = {styles.menu}>
          <View style = {{flex:1}}>
            <View style = {styles.orderBox}>
            <View style = {styles.orderType}>
              <FontText style = {styles.ordetTypeText} font = {'light'}>{i18n.t("store.table.odertype")}</FontText>
              <View style = {styles.typeBtn}>
                <View style = {[styles.btn,{borderColor:"#fd265d"}]}>
                  <FontText style = {[styles.btnText,{color:"#fd265d"}]} font = {'medium'}>{i18n.t("btns.dinein")}</FontText>
                </View>
                <View style = {styles.btn}>
                  <FontText style = {styles.btnText} font = {'medium'}>{i18n.t("btns.takeout")}</FontText>
                </View>
                <View style = {styles.btn}>
                  <FontText style = {styles.btnText} font = {'medium'}>{i18n.t("btns.custom")}</FontText>
                </View>
              </View>
            </View>
            <View style = {styles.tableInfo}>
              <View style = {styles.info}>
                <FontText style = {styles.infoType} font = {'medium'}>{i18n.t("store.table.table")}#1</FontText>
              </View>
              <View style = {styles.info}>
                <FontText style = {styles.infoType} font = {'medium'}>{i18n.t("store.table.guest")}:1</FontText>
              </View>
            </View>
            <View style = {styles.noteSort}>
              <View style = {styles.sortBox}>
                <FontText style = {styles.sortText} font={"book"}>{i18n.t("store.table.sortbyitem")}</FontText>
                <Image style = {styles.sortIcon} source = {require("../../access/imgs/arrow_down.png")} />
              </View>
              <View style = {styles.noteBox}>
                <Image style = {styles.noteIcon} source = {require("../../access/imgs/note_icon_a.png")} />
                <FontText style = {styles.noteText} font={"book"}>{i18n.t("store.table.note")}</FontText>
              </View>
            </View>
          </View>
          </View>
          <View style = {styles.saleControl}>
            <TouchableOpacity
              activeOpacity = {0.8}
              style = {styles.saleBtn}
              >
              <FontText font = {"book"} style = {styles.saleBtnText}>{i18n.t("store.table.nosale")}</FontText>
            </TouchableOpacity>
            <View style = {styles.saleBtns}>
              <View style = {styles.cbtn}>
                <Image style = {styles.printeIcon} source = {require("../../access/imgs/print.png")} />
                <FontText font = {'book'} style = {styles.cbtnText}>{i18n.t("btns.printe")}</FontText>
              </View>
              <View style = {styles.cbtn}>
                <Image style = {styles.emailIcon} source = {require("../../access/imgs/email_icon.png")} />
                <FontText font = {'book'} style = {styles.cbtnText}>{i18n.t("btns.email")}</FontText>
              </View>
              <View style = {styles.cbtn}>
                <Image style = {styles.printeIcon} source = {require("../../access/imgs/edit.png")} />
                <FontText font = {'book'} style = {styles.cbtnText}>{i18n.t("btns.edit")}</FontText>
              </View>
              <View style = {styles.cbtn}>
                <Image style = {styles.deleteIcon} source = {require("../../access/imgs/delete_icon.png")} />
                <FontText font = {'book'} style = {styles.cbtnText}>{i18n.t("btns.delete")}</FontText>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
  renderTable(item,index){
    let {data} = this.state;
    if(index == data.length - 1){
      return (
        <View style = {styles.tablItem}>
          <TouchableOpacity 
            activeOpacity = {0.8}
            onPress = {()=>this.addtable()}
            style = {styles.addView}>
            <Image style = {styles.addIcon} source = {require("../../access/imgs/add_icon.png")} />
            <FontText style = {styles.addText} font={'medium'}>{i18n.t("store.table.addtable")}</FontText>
          </TouchableOpacity>
        </View>
      );
    }else{
      return (
        <View style = {styles.tablItem}>
          <TableItem
            price = {'$'+index*1000+".00"}
            time = {"1h 20m"}
            guest = {"4"}
            tableNum = {index+1}
            isActive = {index%2==0}
          />
        </View>
      );
    }
    
  }
  addtable(){
    this.props.navigation.navigate("addtable");
  }
  rendetAddtab(){
    return <Text>add + </Text>
  }
  valuChange(val,key){
    this.setState({
      [key]:val
    })
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',
  },
  content:{
    flex:1,
    backgroundColor: "#090d17",
  },
  searchBox:{
    height:scaleSize(100),
    paddingHorizontal: scaleSize(30),
    flexDirection: 'row',
    alignItems: 'center',
  },
  searchView:{
    flexDirection: 'row',
    width:scaleSize(360),
    borderBottomWidth: 1,
    borderBottomColor: "#5f5f5f",
    height:scaleSize(60),
    alignItems: 'center',
  },
  inputStyle:{
    fontFamily: fontFamily.book,
    fontSize: scaleSize(27),
    paddingLeft: scaleSize(18),
    flex:1,
    color:"#5f5f5f",
  },
  searchTable:{
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: scaleSize(70),
    flex:1,
    justifyContent: 'space-between',
  },
  tableTips:{
    fontSize: scaleSize(27),
    color:"#9b9b9b"
  },
  fontBox:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    width:scaleSize(600)
  },
  tabLoyout:{
    width:scaleSize(210),
    height:scaleSize(50),
    borderColor: "#cfa972",
    borderWidth: 1,
    borderRadius: scaleSize(5),
    justifyContent: 'center',
    alignItems: 'center',
  },
  layoutText:{
    color: "#cfa972",
    fontSize: scaleSize(27)
  },
  tabContent:{
    flex:1
  },
  warpStyle:{
    // flexDirection: 'row',
    // justifyContent: 'space-between',
  },
  tablItem:{
    marginLeft: scaleSize(24),
  },
  addView:{
    height:scaleSize(400),
    width:scaleSize(270),
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: scaleSize(80),
  },
  addIcon:{
    width:scaleSize(50),
    height:scaleSize(50)
  },
  addText:{
    fontSize: scaleSize(27),
    color:"#cfa972",
    marginTop: scaleSize(30),
  },
  menu:{
    width:scaleSize(550),
    backgroundColor: "#151c2e",
  },
  orderBox:{
    height:scaleSize(250),
    backgroundColor: "#232b40",
    paddingHorizontal: scaleSize(18),
  },
  orderType:{
    height:scaleSize(100),
    justifyContent: 'center',
  },
  ordetTypeText:{
    fontSize: scaleSize(20),
    color:"#9b9b9b"
  },
  typeBtn:{
    height:scaleSize(50),
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: scaleSize(9),
  },
  btn:{
    width:scaleSize(160),
    borderColor: "#9b9b9b",
    borderWidth: 1,
    borderRadius: scaleSize(5),
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnText:{
    color:"#9b9b9b",
    fontSize: scaleSize(20),
  },
  tableInfo:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: scaleSize(9),
  },
  info:{
    height:scaleSize(60),
    width:scaleSize(250),
    backgroundColor: "#394158",
    paddingLeft: scaleSize(18),
    justifyContent: 'center',
  },
  infoType:{
    color:"#ffffff",
    fontSize: scaleSize(28),
  },
  noteSort:{
    flex:1,
    flexDirection: 'row',
  },
  sortBox:{
    flex:1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  sortText:{
    color:"#9b9b9b",
    fontSize: scaleSize(27),
    paddingLeft: scaleSize(18)
  },
  noteBox:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    flexDirection: 'row',
  },
  noteIcon:{
    width:scaleSize(30),
    height:scaleSize(40)
  },
  noteText:{
    color:"#fd265d",
    fontSize: scaleSize(27),
    paddingLeft: scaleSize(18)
  },
  sortIcon:{
    width:scaleSize(23),
    height:scaleSize(14)
  },
  saleControl:{
    height:scaleSize(300),
    justifyContent: 'space-between',
  },
  saleBtn:{
    height:scaleSize(126),
    margin: scaleSize(30),
    backgroundColor: "#fd265d",
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: scaleSize(10),
  },
  saleBtnText:{
    color:"#fff",
    fontSize: scaleSize(42),
  },
  saleBtns:{
    height:scaleSize(110),
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: "#232b40",
    paddingHorizontal: scaleSize(30),
  },
  cbtn:{
    width:scaleSize(120),
    justifyContent: 'center',
    alignItems: 'center',
  },
  printeIcon:{
    width:scaleSize(40),
    height:scaleSize(40)
  },
  emailIcon:{
    width:scaleSize(40),
    height:scaleSize(29)
  },
  deleteIcon:{
    width:scaleSize(37),
    height:scaleSize(40)
  },
  cbtnText:{
    color:"#cfa972",
    fontSize: scaleSize(27),
    marginTop: scaleSize(9),
  }
});
